<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{typeText}}记录</block>
		</cu-custom>
		<view class="bg-red light padding-xs">提示：系统只保存30条{{typeText}}记录！</view>
		<view class="bg-white light padding text-center" v-if="emptyHistor">{{emptyHistor}}</view>
		<view>
			<view @tap="link(item.id)" v-for="(item, key) in history" :key="key" class="padding solid-bottom bg-white">
				<view class="flex margin-bottom-sm">
					<view class="flex-twice flex justify-start align-start">
						<view :class="item.cate_info ? item.cate_info.class:''" class="cu-tag radius" style="max-width: 15%;">{{item.cate_info ? item.cate_info.tag:''}}</view>
		
						<view class="text-bold margin-left-xs text-lg text-cut" style="max-width: 430rpx;">{{item.title}}</view>
						<!-- <view class="margin-left-xs text-cut text-sm" style="max-width: 115rpx;">{{item.singer_name}}</view> -->
					</view>
					<view class="flex-sub text-right text-red flex justify-end align-center">
						<text class="cuIcon-hot margin-right-xs"></text>
						<text class="text-bold">{{item.click}}</text>
					</view>
				</view>
				<view>
					<view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag bg-red sm'>
							歌手
						</view>
						<view class="cu-tag line-red sm">
							{{item.singer_name}}
						</view>
					</view>
					<!-- <view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag bg-blue sm' :class="item.mode_info.class">
							乐器
						</view>
						<view class="cu-tag line-blue sm">
							{{item.cate_info.title}}
						</view>
					</view> -->
					<view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag sm' :class="item.mode_info ? item.mode_info.class:''">
							演奏
						</view>
						<view class="cu-tag line-green sm">
							{{item.mode_info ? item.mode_info.title:''}}
						</view>
					</view>
		
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history:[],
				CustomBar:this.CustomBar,
				emptyHistor:'',
				typeText:'',
				
			}
		},
		onLoad(param) {
			let type = param.type;
			this.emptyHistor = '';
			if(!type) return false;
			
			this.typeText = type == 'c' ? '收藏':'浏览';
			
			uni.showLoading({
				title:'加载中···'
			})
			let typeArr = {c:this.cacheKey.collection, h:this.cacheKey.browseHistory};
			
			this.history = this.Tool.getStorage(typeArr[type])
			
			if(!this.history) this.emptyHistor = '暂没有浏览历史记录！';
			
			uni.hideLoading();
			
		},
		methods: {
			link(id){
				this.Tool.navigateTo({url:'../details/index?id='+id});
			}
		}
	}
</script>

<style>

</style>
